diff --git a/web/chat/multimedia-message.react.js b/web/chat/multimedia-message.react.js
--- a/web/chat/multimedia-message.react.js
+++ b/web/chat/multimedia-message.react.js
@@ -9,7 +9,6 @@
 
 import { type InputState, InputStateContext } from '../input/input-state';
 import Multimedia from '../media/multimedia.react';
-import { ModalContext } from '../modals/modal-provider.react';
 import css from './chat-message-list.css';
 import ComposedMessage from './composed-message.react';
 import sendFailed from './multimedia-message-send-failed';
@@ -30,11 +29,10 @@
   ...BaseProps,
   // withInputState
   +inputState: ?InputState,
-  +setModal: (modal: ?React.Node) => void,
 };
 class MultimediaMessage extends React.PureComponent<Props> {
   render() {
-    const { item, setModal, inputState } = this.props;
+    const { item, inputState } = this.props;
     invariant(
       item.messageInfo.type === messageTypes.IMAGES ||
         item.messageInfo.type === messageTypes.MULTIMEDIA,
@@ -53,7 +51,6 @@
         <Multimedia
           uri={singleMedia.uri}
           pendingUpload={pendingUpload}
-          setModal={setModal}
           multimediaCSSClass={css.multimedia}
           multimediaImageCSSClass={css.multimediaImage}
           key={singleMedia.id}
@@ -89,16 +86,8 @@
 const ConnectedMultimediaMessage: React.ComponentType<BaseProps> = React.memo<BaseProps>(
   function ConnectedMultimediaMessage(props) {
     const inputState = React.useContext(InputStateContext);
-    const modalContext = React.useContext(ModalContext);
-    invariant(modalContext, 'ModalContext should be set in MultimediaMessage');
 
-    return (
-      <MultimediaMessage
-        {...props}
-        inputState={inputState}
-        setModal={modalContext.setModal}
-      />
-    );
+    return <MultimediaMessage {...props} inputState={inputState} />;
   },
 );
 
diff --git a/web/media/multimedia-modal.react.js b/web/media/multimedia-modal.react.js
--- a/web/media/multimedia-modal.react.js
+++ b/web/media/multimedia-modal.react.js
@@ -13,7 +13,7 @@
 
 type Props = {
   ...BaseProps,
-  +setModal: (modal: ?React.Node) => void,
+  +clearModal: (modal: ?React.Node) => void,
 };
 
 class MultimediaModal extends React.PureComponent<Props> {
@@ -35,7 +35,7 @@
       >
         <img src={this.props.uri} />
         <XCircleIcon
-          onClick={this.close}
+          onClick={this.props.clearModal}
           className={css.closeMultimediaModal}
         />
       </div>
@@ -50,7 +50,7 @@
     event: SyntheticEvent<HTMLDivElement>,
   ) => void = event => {
     if (event.target === this.overlay) {
-      this.close();
+      this.props.clearModal();
     }
   };
 
@@ -58,21 +58,17 @@
     event: SyntheticKeyboardEvent<HTMLDivElement>,
   ) => void = event => {
     if (event.keyCode === 27) {
-      this.close();
+      this.props.clearModal();
     }
   };
-
-  close: () => void = () => {
-    this.props.setModal(null);
-  };
 }
 
-function ConnectedMultiMediaModal(props: Props): React.Node {
+function ConnectedMultiMediaModal(props: BaseProps): React.Node {
   const { uri } = props;
   const modalContext = React.useContext(ModalContext);
   invariant(modalContext, 'modalContext should be set in MultimediaModal');
 
-  return <MultimediaModal uri={uri} setModal={modalContext.setModal} />;
+  return <MultimediaModal uri={uri} clearModal={modalContext.clearModal} />;
 }
 
 export default ConnectedMultiMediaModal;
diff --git a/web/media/multimedia.react.js b/web/media/multimedia.react.js
--- a/web/media/multimedia.react.js
+++ b/web/media/multimedia.react.js
@@ -11,17 +11,21 @@
 } from 'react-feather';
 
 import { type PendingMultimediaUpload } from '../input/input-state';
+import { ModalContext } from '../modals/modal-provider.react';
 import css from './media.css';
 import MultimediaModal from './multimedia-modal.react';
 
-type Props = {
-  uri: string,
+type BaseProps = {
+  +uri: string,
   pendingUpload?: ?PendingMultimediaUpload,
   remove?: (uploadID: string) => void,
-  setModal?: (modal: ?React.Node) => void,
   multimediaCSSClass: string,
   multimediaImageCSSClass: string,
 };
+type Props = {
+  ...BaseProps,
+  setModal?: (modal: ?React.Node) => void,
+};
 class Multimedia extends React.PureComponent<Props> {
   componentDidUpdate(prevProps: Props) {
     const { uri, pendingUpload } = this.props;
@@ -108,8 +112,33 @@
 
     const { setModal, uri } = this.props;
     invariant(setModal, 'should be set');
-    setModal(<MultimediaModal uri={uri} setModal={setModal} />);
+    setModal(<MultimediaModal uri={uri} />);
   };
 }
 
-export default Multimedia;
+const ConnectedMultimediaContainer: React.ComponentType<BaseProps> = React.memo<BaseProps>(
+  function ConnectedMultimediaContainer(props) {
+    const {
+      uri,
+      pendingUpload,
+      remove,
+      multimediaCSSClass,
+      multimediaImageCSSClass,
+    } = props;
+    const modalContext = React.useContext(ModalContext);
+    invariant(modalContext, 'modalContext should be defined');
+
+    return (
+      <Multimedia
+        uri={uri}
+        pendingUpload={pendingUpload}
+        remove={remove}
+        multimediaCSSClass={multimediaCSSClass}
+        multimediaImageCSSClass={multimediaImageCSSClass}
+        setModal={modalContext.setModal}
+      />
+    );
+  },
+);
+
+export default ConnectedMultimediaContainer;